import React from 'react'
import type { FC } from 'react'
import { chakra } from "@chakra-ui/react"
 
type Props = {
  size?: 'sm' | 'md' ,
  variant?: 'primary' | 'danger',
  children?: React.ReactNode
}

const Card: FC<Props> = chakra('div', {
  baseStyle: {
    shadow: 'lg',
    rounded: 'lg',
    bg: 'white',
  },
  sizes: {
    sm: {px: '1', py: '3', fontSize: '12px'},
    md: {px: '2', py: '5', fontSize: '16px'},
  },
  variants: {
    primary: {bgColor: 'blue.500', color: 'white'},
    danger: {bgColor: 'red.500', color: 'white'},
  }
})
 
Card.defaultProps = {
  size: 'sm',
  variant: 'primary'
}

export default Card